<template>
  <div>
    <div class="background">
      <img src="../login/login.jpg" width="100%" height="100%" alt="" />
    </div>
    <div class="front">
      <div style="margin-left: 90%;">
        <el-dropdown>
          <el-button plain type="primary" style="margin-top: 2%;color: black">
            切换用户<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/"><el-dropdown-item>管理员</el-dropdown-item></router-link>
            <el-dropdown-item>租客</el-dropdown-item>
            <router-link to="/loginHouseOwner"><el-dropdown-item>房主</el-dropdown-item></router-link>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <body id="poster">
      <el-form class="login-container" label-position="left" label-width="0px">
        <h3 class="login_title">租客登录</h3>
        <el-form-item>
          <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>

        <el-form-item>
          <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>

        <el-form-item style="width: 100%">
          <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
          <el-button type="primary" style="width: 100%;background: #505458;border: none;margin-left: 0" v-on:click="tenregister=true">注册</el-button>
          <el-dialog
            title="提示"
            :visible.sync="tenregister"
            width="30%"
            append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
              <el-form-item label="电话号码" style="margin-right: 50px" prop="tphone">
                <el-input v-model.number="form.tphone"></el-input>
              </el-form-item>
              <el-form-item label="设置密码" style="margin-right: 50px" prop="password">
                <el-input v-model.number="form.password"></el-input>
              </el-form-item>
              <el-form-item label="姓名" style="margin-right: 50px" prop="tename">
                <el-input v-model="form.tename"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio v-model="form.sex"  label="男">男</el-radio>
                <el-radio v-model="form.sex" label="女">女</el-radio>
              </el-form-item>
              <el-form-item label="年龄" style="margin-right: 50px" prop="age">
                <el-input v-model.number="form.age"></el-input>
              </el-form-item>
              <el-form-item label="目前居住地" style="margin-right: 50px" prop="liveaddress">
                <el-input v-model="form.liveaddress"></el-input>
              </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                    <el-button @click="tenregister = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('form')">确 定</el-button>
                  </span>
          </el-dialog>
        </el-form-item>
      </el-form>
      </body>
    </div>
  </div>
</template>


<script>
  export default {
    name: "tenantLogin",
    data() {
      return {
        loginForm: {
          username: '',
          password: '',
        },
        form:{
          tphone: '',
          password: '',
          tename: '',
          sex: '',
          age: '',
          liveaddress: ''
        },
        responseResult: [],
        tenregister: false,
        rules: {
          tphone: [
            { required: true, message: '电话号码不能为空'},
            { type: 'number', message: '电话号码必须为数字'}
          ],
          tename: [
            { required: true, message: '姓名不能为空'}
          ],
          age: [
            { required: true, message: '年龄不能为空'},
            { type: 'number', message: '年龄必须为数字值'}
          ],
          liveaddress: [
            { required: true, message: '地址不能为空'}
          ],
          password:[
            { required: true, message: '密码不能为空'}
          ]
        }
      }
    },
    methods: {
      login() {
        var that = this;
        this.$axios({
          method: 'post',
          url: '/tenant/login',
          params:{
            username: that.loginForm.username,
            password: that.loginForm.password
          }
        })
          .then(successResponse => {
            if (successResponse.data === "error"){
              alert("账号或密码错误")
            }
            else {
              sessionStorage.setItem("name",successResponse.data)
              sessionStorage.setItem("pwd",that.loginForm.password)
              sessionStorage.setItem("id",that.loginForm.username)
              this.$router.push('/tenant_main')

            }
          })
      },
      submitForm(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.tenregister = false
            this.$axios({
              url: '/tenant/tenantRegister',
              params:{
                tenant: this.form
              }
            }).then(successResponse=>{
              if(successResponse.data === "success"){
                this.open()
              }else if (successResponse.data === "exit"){
                this.open2()
              }else {
                this.open3()
              }
              this.form={};
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      open() {
        this.$message({
          message: '注册成功',
          type: 'success'
        });
      },
      open2(){
        this.$message.error('手机号已经存在');
      },
      open3(){
        this.$message.error('注册失败');
      }
    }
  }
</script>

<style>
  #poster {
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  body{
    margin: 0px;
    padding: 0;
  }

  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid blue;
    box-shadow: 0 0 25px black;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .background{
    width:100%;
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    z-index:-0.5;
    position: absolute;
  }

  .front{
    z-index:0.1;
  }
  router-link {
    text-decoration: none;
    color: black;
  }
  a{
    text-decoration: none;
  }
</style>
